<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		.box {
			float: left;
			
			padding: 10px 0 0 10px;
			height: auto;
		}

		.pic {
			border: 1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 10px #ccc;
			padding: 10px;
		}
		.pic img {
			width: 200px;
			height: auto;
		}

		#container{
			position: relative;
		}

		#container:after{
			content: '';
			display: block;
			clear: both;
			visibility: hidden;
			position: relative;
		}
	</style>
	<script>
		function init(container,containerWidth,columnLen){
			
			var imgs = [];
			for (var i = 0; i < 6; i++) {
				for (var j = 1; j <= 4; j++){
					imgs.push("images/" + j + ".jpg");
				}
			}
			var imgWidth = Math.floor(containerWidth / columnLen);
			var fragments = document.createDocumentFragment();
			for(var i = 0; i < imgs.length; i++){
				var oBox = document.createElement("div");
				oBox.className = "box";
				// oBox.style.width = (imgWidth + 20) + "px";
				var oPic = document.createElement("div");
				oPic.className = "pic";
				oBox.appendChild(oPic);
				var oImg = document.createElement("img");
				oImg.src = imgs[i];
				// oImg.style.width = "150px";

				oPic.appendChild(oImg);

				fragments.appendChild(oBox);
			}

			
			// var containerCss = "width: 900px;margin:0 auto;";
			// container.style.cssText = containerCss;
			container.innerHTML = "";
			container.appendChild(fragments);
		}

		function waterFall(container,columnLen){
			var rowHeights = [],oBoxs = [];
			var allChilds = container.getElementsByTagName("*");
			for(var i = 0; i < allChilds.length; i++){
				var cur = allChilds[i];
				if(cur.className && /\s*box\s*/gi.test(cur.className)){
					oBoxs.push(cur);
				}
			}
			// debugger;
			var cWidth = oBoxs[0].offsetWidth;

			var containerCss = "width: " + (Math.floor(cWidth * columnLen)) + "px;margin:0 auto;";
			container.style.cssText = containerCss;
			for(var i = 0; i < oBoxs.length; i++){
				if(i < columnLen){
					var h = oBoxs[i].offsetHeight;
					rowHeights.push(h);
				}
				else{
					var minHeight = Math.min.apply(null,rowHeights);
					var index = indexOf(rowHeights,minHeight);
					oBoxs[i].style.position = "absolute";
					oBoxs[i].style.left = oBoxs[index].offsetLeft + "px";
					oBoxs[i].style.top = minHeight + "px";

					rowHeights[index] += oBoxs[i].offsetHeight;
				}
			}
			// console.log(rowHeights);
			// console.log(container.offsetHeight);
		}

		function each(arr,callback){
			for(var i = 0; i < arr.length; i++){
				if(callback(i,arr[i])){
					return arr[i];
				}
			}
		}
		
		function indexOf(arr,value){
			for(var i = 0; i < arr.length; i++){
				if(arr[i] === value){
					return i;
				}
			}
		}

		window.onload = function(){
			var container = document.getElementById("container");
			// init(container,600,4);
			waterFall(container,5);
		}
	</script>
</head>
<body>
	<div id="container">
		<div class="box">
			<div class="pic"><img src="images/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/5.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/5.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/1.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/2.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/3.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/4.jpg" alt=""></div>
		</div>
		<div class="box">
			<div class="pic"><img src="images/5.jpg" alt=""></div>
		</div>
	</div>

</body>
</html>